<template>
  <div>
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item.value)">
        <span
            v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
            :key="item.value"
            :index="index"
            :class="item.elTagClass"
        >{{ item.label + " " }}</span>
        <a-tag
            v-else
            :disable-transitions="true"
            :key="item.value + ''"
            :index="index"
            :color="item.elTagType"
            :class="item.elTagClass"
        >{{ item.label + " " }}</a-tag>
      </template>
    </template>
  </div>
</template>

<script setup>
// 记录未匹配的项
import {computed, ref} from "vue";

const props = defineProps({
  // 数据
  options: {
    type: Array,
    default: null,
  },
  // 当前的值
  value: [Number, String, Array],
});

const values = computed(() => {
  if (props.value === null || typeof props.value === 'undefined' || props.value === '') return [];
  return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator);
});
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
